<template>
    <div id="deviceDetails" class="content">
        <div class="tilte-bar">设备详细信息</div>
        <div class="padding-1">
            <!-- weui 订单详细信息 -->
            <div class="layui-card-header layui-card-header-margin">设备详细信息</div>
            <div class="weui-cell weui-cell-background-color" v-for="(value, key) in deviceDetails">
                <div class="weui-cell__bd">
                    <p>{{key}}：</p>
                </div>
                <div class="weui-cell__ft">{{value}}</div>
            </div>
            <!-- <div class="layui-card-header">设备处理流程</div>
            <ul class="layui-timeline">
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <div class="timeline-text timeline-text-bold">项目名称</div>
                  <div class="timeline-text">
                    <div class="sub-timeline-text">张三</div>
                    <div class="sub-timeline-text">15678769087ssssssssss</div>
                    <div class="sub-timeline-text">2015.09.17</div>
                  </div>
                  <div class="timeline-text">
                      <div class="sub-timeline-text">检测完毕qqqqqqqqqqqqqqqqqqqqqq</div>
                      <div class="sub-timeline-text">检测完毕</div>
                  </div>
                </div>
              </li><li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <div class="timeline-text timeline-text-bold">项目名称</div>
                  <div class="timeline-text">
                    <div class="sub-timeline-text">张三</div>
                    <div class="sub-timeline-text">15678769087ssssssssss</div>
                    <div class="sub-timeline-text">2015.09.17</div>
                  </div>
                  <div class="timeline-text">
                      <div class="sub-timeline-text">检测完毕qqqqqqqqqqqqqqqqqqqqqq</div>
                      <div class="sub-timeline-text">检测完毕</div>
                  </div>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <div class="timeline-text timeline-text-bold">项目名称</div>
                  <div class="timeline-text">
                    <div class="sub-timeline-text">张三</div>
                    <div class="sub-timeline-text">15678769087ssssssssss</div>
                    <div class="sub-timeline-text">2015.09.17</div>
                  </div>
                  <div class="timeline-text">
                      <div class="sub-timeline-text">检测完毕qqqqqqqqqqqqqqqqqqqqqq</div>
                      <div class="sub-timeline-text">检测完毕</div>
                  </div>
                </div>
              </li>
            </ul> -->
        </div>
    </div>
</template>

<script>
    import qs from "qs"
    // let a = {
    //     "device_manufac_code": "设备出厂编号",
    //     "type_specification": "型号规格",
    //     "install_height": "安装高度",
    //     "self_code": "自编号",
    //     "device_charge": "检验费用",
    // };
    export default {
        mounted() {
            //拿到设备号
            this.deviceId = this.$route.params.deviceId;
            this.getDeviceDetails();
        },
        data() {
            return {
                //设备号
                deviceId: '',
                // 设备详细信息的字典
                KEY_DICT: {
                    "device_manufac_code": "设备出厂编号",
                    "monitor_status": "监控状态",
                    "type_specification": "型号规格",
                    "install_height": "安装高度",
                    "self_code": "自编号",
                    "device_charge": "检验费用",
                },
                // 设备详细信息
                deviceDetails: {},
            }
        },
        methods: {
            // 获取设备详细信息
            getDeviceDetails: function() {
                // 从接口获取设备详情
                let _self = this;
                _self.$http({
                    method: 'post',
                    url: 'deviceDetail',
                    data: qs.stringify({
                        device_detail_id: _self.deviceId
                    })
                }).then( response => {
                    var data = response.data.data;
                    if(data.monitor_status === "0") {
                        data.monitor_status = "无监控系统";
                    }
                    if(data.monitor_status === "1") {
                        data.monitor_status = "有监控系统";
                    }
                    _self.deviceDetails = _self.GLOBAL.toChinese(data, _self.KEY_DICT);
                })
            }
        }
    }
</script>

<style scoped>
    *{
        box-sizing: border-box;
    }
    .device-flow {
        background-color: #7c8dbd;
        margin: .5rem 0;
        color: #efefef;
        border-radius: .3rem;
        padding: .5rem;
    }
    .device-flow span {
        display: inline-block;
        width: 6rem;
        height: 100%;
        vertical-align: top;
        text-align: center;
    }
    .img-size {
        width: 1.4rem;
    }
    .order-tag-padding {
       width: 32%; 
    }
    .layui-timeline {
        background-color: white;
        list-style: none;
        padding: .8rem .3rem;
    }
    .layui-timeline-item {
        position: relative;
        padding-bottom: 1rem;
    }
    .layui-timeline-axis {
        position: absolute;
        left: .1rem;
        top: 0;
        z-index: 6;
        width: .8rem;
        height: .8rem;
        line-height: .8rem;
        background-color: #fff;
        color: white;
        border: .05rem solid #5FB878;
        text-align: center;
        border-radius: 50%;
    }
    .layui-timeline-item:before {
        content: '';
        position: absolute;
        left: .45rem;
        top: 0;
        z-index: 0;
        width: .05rem;
        height: 100%;
        background-color: #ccc;
    }
    .layui-text {
        /* line-height: 22px; */
        font-size: .8rem;
        color: #666;
    }
    .layui-timeline-content {
        padding-left: 1.4rem;
    }
    .timeline-text {
        display: inline-block;
        width: 32%;
        vertical-align: top;
        word-break: break-all;
        padding: 0 .25rem;
        line-height: 1rem;
    }
    .timeline-text-bold {
        font-weight: bold;
    }
    .sub-timeline-text {
        margin-bottom: .5rem;
    }
    .layui-card-header {
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        border-bottom: 1px solid #e2e2e2;
        color: #333;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
        background-color: white;
        margin-top: 1.5rem;
    }
    .layui-card-header-margin {
        margin-top: 0;
    }
</style>